:global {
  .video-js .vjs-control {
    outline: none;
  }

  .vjs-poster .vjs-poster img {
    // aspect-ratio: 16/9;
    // width: 50%;
    // position: absolute;
    // left: 50%;
    // top: 50%;
    // transform: translate(-50%, -50%);
  }

}

.video-index {
  height: 100%;
  width: 100%;
  position: relative;

  .mask {
    width: 100%;
    height: 250px;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
    position: absolute;
    bottom: 0px;
    left: 0px;
  }

  :global {
    .video-wrap {
      width: 100%;
      position: relative;
      color: #ffffff;
      .introduce {
        position: absolute;
        bottom: 60px;
        left: 10px;
        width: calc(100% - 70px);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        row-gap: 10px;
        z-index: 99;

        .userinfo {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          column-gap: 10px;
          .avatar {
            padding: 2px;
            background-color: #fff;
            border-radius: 50%;
            display: flex;
            place-items: center;
            place-content: center;

            img {
              width: 30px;
              height: 30px;
              border-radius: 50%;
              object-fit: cover;
            }
          }

          .txt {
            width: 100%;
            word-break: break-all;
            font-size: 20px;
            font-weight: bolder;
          }
        }
      }

      :is(.collect, .sound) {
        position: absolute;
        right: 10px;
        border-radius: 50%;
        z-index: 999;

        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }

      .collect {
        bottom: 8vh;
      }

      .sound {
        bottom: 24vh;
      }
    }

  }
}